import React from "react";
import { Image, Tag } from "antd-mobile";
import { ClockCircleOutline } from "antd-mobile-icons";
import type { HomelistingsInfo } from "@/services";
import { parseImageUrl } from "@/utils";
import dayjs from "dayjs";
import { history } from "umi";
interface AssetCardProps {
  record: HomelistingsInfo;
  selectedMode?: boolean;
  selectedId?: string;
  onSelect?: (onlyId: string) => void;
}

export const AssetCard: React.FC<AssetCardProps> = ({
  record,
  selectedMode,
  selectedId,
  onSelect,
}) => {
  const assetsList = [
    "法拍房产",
    "法拍商业",
    "二手商业",
    "特殊产业",
    "车位",
    "其他",
  ];

  const auctionList = ["一拍", "二拍", "变卖", "其他"];

  const gotoDetail = () => {
    if (selectedMode) {
      onSelect && onSelect(record.onlyId);
    } else {
      history.push(`/modules/asset-detail?onlyId=${record.onlyId}`);
    }
  };

  return (
    <>
      <div
        className={
          (selectedId == record.onlyId
            ? "border-2px border-blue-6 border-solid"
            : "") + " p-2 bg-white  mb-2"
        }
        onClick={() => gotoDetail()}
      >
        <div className="flex ">
          <div className="w-100px">
            <Image
              className="rounded"
              src={parseImageUrl(record.imgUrl)}
              width={100}
              height={140}
              fit="cover"
            />
          </div>

          <div className="ml-10px">
            <div className="font-bold text-14px">
              {record.communityName && (
                <Tag color="primary" fill="outline" className="mr-6px">
                  {record.communityName}
                </Tag>
              )}

              <span>{record.name}</span>
            </div>
            <div className="mt-6px flex items-center">
              <span>类型：</span>
              <Tag color="default" fill="outline">
                {assetsList[record.type]}
              </Tag>
              <span className="ml-10px">阶段：</span>
              <Tag color="success" fill="outline">
                {auctionList[record.auctionMethod]}
              </Tag>
            </div>
            <div className="mt-6px flex items-center">
              <span>面积:</span>
              <span className="text-orange-6 ml-6px"> {record.area}㎡</span>
            </div>
            <div className="mt-6px flex items-center">
              <span className="">市场/起拍价：</span>
              <Tag color="success" fill="outline">
                ¥{record.marketPrice}万元
              </Tag>
              <span className="mx-1">/</span>
              <Tag color="success" fill="outline">
                ¥{record.startingBidPrice}万元
              </Tag>
            </div>
            <div className="mt-6px flex items-center">
              <span>状态：</span>
              {record.auctionStatus === 0 && (
                <span className="text-orange-6"> 未起拍</span>
              )}
              {record.auctionStatus === 1 && (
                <span className="text-blue-6"> 竞拍中</span>
              )}
              {record.auctionStatus === 2 && (
                <span className="text-red-6"> 已结束</span>
              )}
            </div>
          </div>
        </div>
        <div className="mt-2 bg-blue-6 text-center text-white p-2 rounded-md">
          <ClockCircleOutline />
          <span className="ml-1">拍卖时间：</span>
          <span>{dayjs(record.shootingTime).format("YYYY-MM-DD HH:mm")} </span>
          <span className="mx-2">-</span>
          <span>
            {record.stopTime
              ? dayjs(record.stopTime).format("YYYY-MM-DD HH:mm")
              : "未知"}
          </span>
        </div>
      </div>
    </>
  );
};
